<template>
  <div class="page-content">
    <div class="left-bar">
      <div class="bar-title">
        <img
          class="title-icon"
          src="@/assets/images/icon/book.png"
        />
        <span class="title-name">书签分类</span>
      </div>
      <div class="bar-list">
        <ul class="bar-ul">
          <li class="bar-li">
            <a class="li-content">
              <div class="c-badge">20</div>
              <div class="c-info">
                <div class="info-title">设计网站</div>
                <div class="info-meta">常用的设计类网站</div>
              </div>
            </a>
          </li>

          <li class="bar-li">
            <a class="li-content">
              <div class="c-badge">20</div>
              <div class="c-info">
                <div class="info-title">设计网站</div>
                <div class="info-meta">常用的设计类网站</div>
              </div>
            </a>
          </li>

          <li class="bar-li">
            <a class="li-content">
              <div class="c-badge">20</div>
              <div class="c-info">
                <div class="info-title">设计网站</div>
                <div class="info-meta">常用的设计类网站</div>
              </div>
            </a>
          </li>

          <li class="bar-li">
            <a class="li-content">
              <div class="c-badge">20</div>
              <div class="c-info">
                <div class="info-title">设计网站</div>
                <div class="info-meta">常用的设计类网站</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="right-bar">
      <div class="bar-title">
        <img
          class="title-icon"
          src="@/assets/images/icon/search.png"
        />
        <el-input
          class="title-search"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="bar-list">
        <ul class="bar-ul more-ul">
          <li class="more-li">
            <div class="more-content">
              <div class="more-info">
                <div class="more-section">
                  <div class="more-s-title">包图网</div>
                  <div class="more-s-desc">包图网汇集了各种流行趋势，视觉冲击力强的原创广告图片设计、电商淘宝、企业办公模板素材，由顶尖的设计师供稿，符合各个行业的商用需求，下载高品质正版素材就到包图网。</div>
                </div>
              </div>
            </div>
          </li>
          <li class="more-li">
            <div class="more-content">
              <div class="more-info">
                <div class="more-section">
                  <div class="more-s-title">包图网</div>
                  <div class="more-s-desc">包图网汇集了各种流行趋势，视觉冲击力强的原创广告图片设计、电商淘宝、企业办公模板素材，由顶尖的设计师供稿，符合各个行业的商用需求，下载高品质正版素材就到包图网。</div>
                </div>
              </div>
            </div>
          </li>
          <li class="more-li">
            <div class="more-content">
              <div class="more-info">
                <div class="more-section">
                  <div class="more-s-title">包图网</div>
                  <div class="more-s-desc">包图网汇集了各种流行趋势，视觉冲击力强的原创广告图片设计、电商淘宝、企业办公模板素材，由顶尖的设计师供稿，符合各个行业的商用需求，下载高品质正版素材就到包图网。</div>
                </div>
              </div>
            </div>
          </li>
          <li class="more-li">
            <div class="more-content">
              <div class="more-info">
                <div class="more-section">
                  <div class="more-s-title">包图网</div>
                  <div class="more-s-desc">包图网汇集了各种流行趋势，视觉冲击力强的原创广告图片设计、电商淘宝、企业办公模板素材，由顶尖的设计师供稿，符合各个行业的商用需求，下载高品质正版素材就到包图网。</div>
                </div>
              </div>
            </div>
          </li>
          <li class="more-li">
            <div class="more-content">
              <div class="more-info">
                <div class="more-section">
                  <div class="more-s-title">包图网</div>
                  <div class="more-s-desc">包图网汇集了各种流行趋势，视觉冲击力强的原创广告图片设计、电商淘宝、企业办公模板素材，由顶尖的设计师供稿，符合各个行业的商用需求，下载高品质正版素材就到包图网。</div>
                </div>
              </div>
            </div>
          </li>
          <li class="more-li">
            <div class="more-content">
              <div class="more-info">
                <div class="more-section">
                  <div class="more-s-title">包图网</div>
                  <div class="more-s-desc">包图网汇集了各种流行趋势，视觉冲击力强的原创广告图片设计、电商淘宝、企业办公模板素材，由顶尖的设计师供稿，符合各个行业的商用需求，下载高品质正版素材就到包图网。</div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.page-content {
  flex: 1 1 auto;
  display: flex;
  position: relative;
  margin: 20px;
  overflow: hidden;
  .bar-title {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 2px;
    min-height: 42px;
    z-index: 250;
    margin-right: 5px;
    .title-icon {
      width: 15px;
      height: 15px;
      padding: 8px;
      margin-left: 10px;
      background: #639be4;
    }
    .title-name {
      color: rgb(4, 74, 171);
      margin-left: 10px;
    }
    .title-search {
      width: 200px;
    }
  }
  .bar-list {
    flex: 1 1 auto;
    position: relative;
    overflow-y: hidden;
    padding-right: 3px;
    .bar-ul {
      transform: translate(0px, 0px) translateZ(0px);
      position: relative;
      padding-bottom: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
      .bar-li {
        cursor: pointer;
        a.li-content {
          display: flex;
          padding: 5px;
          margin-bottom: 10px;
          background-color: #fff;
          border-radius: 2px;
          .c-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            transition: all 0.2s ease;
            color: #e8f1ff;
            background-color: #007fff;
            overflow: hidden;
            width: 38px;
            height: 46px;
          }
          .c-info {
            flex-grow: 1;
            position: relative;
            margin-left: 10px;
            padding: 4px 0;
            min-width: 0;
            cursor: pointer;
            .info-title {
              max-width: 100%;
              font-size: 15px;
              line-height: 20px;
              color: #3d3d3d;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .info-meta {
              display: flex;
              font-size: 12px;
              color: #c2c5cd;
              white-space: nowrap;
              opacity: 0.8;
              margin-top: 2px;
            }
          }
        }
        &:hover {
          a.li-content {
            .c-badge {
              background-color: #71b5f8;
            }
          }
        }
      }
      &.more-ul {
        display: flex;
        flex-wrap: wrap;
        .more-li {
          position: relative;
          margin: 0 10px 10px 0;
          width: calc((100% - 20px * 1) / 2);
          .more-content {
            position: relative;
            border-radius: 2px;
            background-color: #fff;
            .more-info {
              display: flex;
              position: relative;
              padding: 24px 30px;
              box-sizing: border-box;
              cursor: pointer;
              .more-section {
                flex-grow: 1;
                width: 0;
                overflow: hidden;
                .more-s-title {
                  display: flex;
                  margin: 0;
                  padding: 0;
                  font-size: 20px;
                  font-weight: 600;
                  color: #0366d6;
                  overflow: hidden;
                  margin-right: 20px;
                  margin-bottom: 8px;
                }
                .more-s-desc {
                  font-size: 14px;
                  line-height: 22px;
                  max-height: 60px;
                  margin-right: 20px;
                  color: #999;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }
    }
  }
  .left-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: default;
    user-select: none;
    flex: 0 0 auto;
    width: 400px;
  }
  .right-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: default;
    user-select: none;
    margin-left: 20px;
    flex: 1 1 auto;
  }
}
</style>
